<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <label class="label">班级名称:</label>
                <el-input class="handle-input" v-model="form.clazz" />
                <label class="label">所属机构:</label>
                <el-input class="handle-input" v-model="form.org" >
                    <template #append>
                        <el-select v-model="form.org" style="width: 44px;" :suffix-icon="CaretBottom">
                        <el-option
                            v-for="item in options.organizations"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                </el-select>
                    </template>
                </el-input>
                <label class="label">所属分支:</label>
                <el-input class="handle-input" v-model="form.branch">
                    <template #append>
                        <el-select v-model="form.branch" style="width: 44px;" :suffix-icon="CaretBottom">
                            <el-option
                            v-for="item in options.branch"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                        </el-select>
                </template>
                    </el-input>
                    <label class="label">专业方向:</label>
                <el-input class="handle-input" v-model="form.major">   
                    <template #append>          
                        <el-select  v-model="form.major" style="width: 44px;" :suffix-icon="CaretBottom">
                            <el-option
                            v-for="item in options.branch"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                        </el-select>
                </template>   
                </el-input>
                <label class="label">老师名称:</label>
                <el-input class="handle-input" v-model="form.tName" />
                <el-button color="#0ab394" class="handle-btn"  @click="handleSearch">查询</el-button>
                <el-row class="top-btn">
                     <!-- <el-button-group class="ml-4"> -->
                        <el-button color="#23c6c8"  style="color: #fff;" @click="exportData">导出</el-button> 
                        <el-button color="#1c84c6"  @click="open">添加</el-button> 
                        <el-button color="#e35148" @click="handleAllDelete">删除</el-button>                         
                    <!-- </el-button-group> -->
                </el-row>
                </div>
                <el-table ref="multipleTableRef" 
                    :header-cell-style="{color:'#2A62BC'}"
                     :data="tableData"   
                     style="width: 100%;" 
                    size="small"
                    border
                    @selection-change="handleSelectionChange">
                    <el-table-column   type="selection" width="35" />
                    <el-table-column  prop="id" label="序号" width="60" ></el-table-column>
                    <el-table-column prop="tName" label="老师名称" width="80"></el-table-column>
                    <el-table-column prop="clazz" label="班级"></el-table-column>
                    <el-table-column prop="adress" label="考评地址"></el-table-column>
                    <el-table-column prop="grade" label="考评成绩" width="80"></el-table-column>
                    <el-table-column prop="time" label="有效期"></el-table-column>
                    <el-table-column prop="status" label="状态"></el-table-column>
                    <el-table-column label="操作" width="280" align="center" >
                        <template #default="scope">
                            <el-row class="right-btn">
                                <el-tooltip content="审核" placement="bottom" effect="light">
                                    <el-button  @click="openDetail(scope.row)">
                                        <i class="iconfont icon-check04 blue"></i>
                                    </el-button>
                                    </el-tooltip>
                                <el-tooltip content="查看详情" placement="bottom" effect="light">
                                    <el-button  class="qi"   @click="lookDetail(scope.row)">
                                        <i class="iconfont icon-exclamation "></i>
                                        </el-button>
                                </el-tooltip>
                                <el-tooltip content="修改" placement="bottom" effect="light">
                                    <el-button  :icon="Edit" @click="open(scope.$index,scope.row)" ></el-button>
                                </el-tooltip>
                                <el-tooltip content="删除" placement="bottom" effect="light">
                                    <el-button  :icon="Delete" class="red"  @click="handleDelete(scope.$index)"></el-button>
                                </el-tooltip>
                            </el-row>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="pagination">
                    <el-pagination
                    :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :page-sizes="[5, 10, 15, 20]"
                        size="small"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageTotal"
                        @size-change="handleSizeChange"
                        @current-change="handlePageChange"/>
                </div>
        </div>
    
            <!-- 修改/添加弹出框 -->
            <el-dialog :title="titleEdit" v-model="editVisible" width="25%" >
                <el-form label-width="75px">
                    <el-form-item label="所属机构:">
                        <el-input class="dialog-input" v-model="form.org" >
                            <template #append>
                                <el-select v-model="form.org" style="width: 44px;" :suffix-icon="CaretBottom">
                                    <el-option
                                        v-for="item in options.organizations"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        />
                                 </el-select>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="所属分支:">
                        <el-input class="dialog-input" v-model="form.branch">
                            <template #append>
                                <el-select v-model="form.branch" style="width: 44px;" :suffix-icon="CaretBottom">
                                    <el-option
                                    v-for="item in options.branch"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    />
                                </el-select>
                            </template>
                    </el-input>
                    </el-form-item>
                    <el-form-item label="所属专业:">
                        <el-input class="dialog-input" v-model="form.major" >   
                            <template #append>          
                                <el-select  v-model="form.major" style="width: 44px;" :suffix-icon="CaretBottom">
                                    <el-option
                                    v-for="item in options.branch"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    />
                                </el-select>
                            </template>   
                        </el-input>
                    </el-form-item>
                    <el-form-item label="所属班级:">
                        <el-input class="dialog-input" v-model="form.clazz"   >
                            <template #append>          
                                <el-select  v-model="form.clazz" style="width: 44px;" :suffix-icon="CaretBottom">
                                    <el-option
                                    v-for="item in options.schemas"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    />
                                </el-select>
                            </template>   
                        </el-input>
                    </el-form-item>
                    <el-form-item label="老师名称:">
                        <el-input class="dialog-input" v-model="form.tName"   >
                            <template #append>          
                                <el-select  v-model="form.tName" style="width: 44px;" :suffix-icon="CaretBottom">
                                    <el-option
                                    v-for="item in options.tNames"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    />
                                </el-select>
                            </template>   
                        </el-input>
                    </el-form-item>
                    <el-form-item label="允许IP:">
                        <el-input placeholder="例如“192.168.1" disabled=""></el-input>
                    </el-form-item>
                    <el-form-item label="开始时间:" >
                        <el-date-picker type="date" />
                    </el-form-item>
                    
                    <el-form-item label="结束时间:" >
                        <el-date-picker type="date" />
                    </el-form-item>
                    <el-form-item label="考评模版:">
                        <el-input class="dialog-input" v-model="form.pollTemplate"   >
                            <template #append>          
                                <el-select  v-model="form.pollTemplate" style="width: 44px;" :suffix-icon="CaretBottom">
                                    <el-option
                                    v-for="item in options.templates"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    />
                                </el-select>
                            </template>   
                        </el-input>
                    </el-form-item>
                    <el-radio-group v-model="form.ipPriv" class="radio-1">
                        <el-radio label="1" size="large">限定IP网段,一个IP地址只能提交一次</el-radio>
                        <br/>
                        <el-radio label="2" size="large">不限定IP网段,任何IP都可以提交</el-radio>
                    </el-radio-group>
    
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button color="#0ab394" @click="editVisible = false">关闭</el-button>
                        <el-button color="#0ab394" @click="saveEdit">确 定</el-button>
                    </span>
                </template>
            </el-dialog>
         
            <!-- 审核详情弹出框 -->
            <el-dialog title="详情" v-model="dialogVisible01" width="25%" >
                <el-tabs type="border-card">
                <el-tab-pane label="考评信息">
                    <el-descriptions
                        title=""
                        :column="4"
                        size="18"
                        direction="vertical"
                        border
                    >
                    <el-descriptions-item label="教师名称:">Alan</el-descriptions-item>
                    <el-descriptions-item label="班级名称:">Web前端</el-descriptions-item>
                    <el-descriptions-item label="考评人数:">20</el-descriptions-item>
                    <el-descriptions-item label="总得分">
                    <el-tag size="small">8</el-tag>
                    </el-descriptions-item>
                </el-descriptions>
                
                </el-tab-pane>
                <el-tab-pane label="选项得分">
                    <optionT></optionT>
                
                </el-tab-pane>
                <el-tab-pane label="学生建议">
                    <suggestT></suggestT>
                </el-tab-pane>
            </el-tabs>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button color="#ED5565" style="color: #fff;" @click="dialogVisible01 = false">
                            <i class="iconfont icon-cuocha_kuai white"></i> 关闭
                        </el-button>
                        <el-button color="#0ab394" @click="isCommit">
                            <i class="iconfont icon-duigou_kuai "></i> 已审核不可重复提交
                        </el-button>
                    </span>
                </template>
            </el-dialog>
            <!-- 查看审核详情弹出框 -->
            <el-dialog title="详情" v-model="dialogVisible02" width="25%" >
                <el-tabs type="border-card">
                <el-tab-pane label="考评信息">
                    <el-descriptions
                        title=""
                        :column="4"
                        size="18"
                        direction="vertical"
                        border
                    >
                    <el-descriptions-item label="教师名称:">{{teacherPoll.tName}}</el-descriptions-item>
                    <el-descriptions-item label="班级名称:">{{teacherPoll.clazz}}</el-descriptions-item>
                    <el-descriptions-item label="考评人数:">{{teacherPoll.stuNum}}</el-descriptions-item>
                    <el-descriptions-item label="总得分">
                    <el-tag size="small">{{teacherPoll.scores}}</el-tag>
                    </el-descriptions-item>
                </el-descriptions>
                
                </el-tab-pane>
                <el-tab-pane label="选项得分">
                    <optionT></optionT>
                
                </el-tab-pane>
                <el-tab-pane label="学生建议">
                    <suggestT></suggestT>
                </el-tab-pane>
            </el-tabs>
              
            </el-dialog>
         
    
            <!-- </div> -->
        </div>
    </template>
    
    <script setup>
    import { ref, reactive } from 'vue';
    import { ElMessage, ElMessageBox } from 'element-plus';
    import { Delete, Edit, Search, CaretBottom } from '@element-plus/icons-vue';
    import { getTeacherPoll} from '../../api/evaluation' ;
    import optionT from './subVue/optionT.vue'
    import suggestT from './subVue/suggestT.vue'
    const options = reactive({
    organizations:[
        {
            value: '天龙八部',
            label: '天龙八部',
          },
      {
        value: '神雕侠侣',
        label: '神雕侠侣',
      },
      {
        value: '仙剑奇侠传',
        label: '仙剑奇侠传',
      },
      {
        value: 'flyme',
        label: 'flyme',
      },
      ],
      branch:[{
        value: '英语',
        label: '英语',
          },
      {
        value: '书法',
        label: '书法',
      },
      {
        value: '钢琴',
        label: '钢琴',
      },
      {
        value: 'flyme',
        label: 'flyme',
      },],
      
      dirs:[{
        value: '英语',
        label: '英语',
          },
      {
        value: '书法',
        label: '书法',
      },
      {
        value: '钢琴',
        label: '钢琴',
      },
      {
        value: 'flyme',
        label: 'flyme',
      },],
      schemas:[{
        value: 'JAVA',
        label: 'JAVA',
          },
      {
        value: 'Android',
        label: 'Android',
      },
      {
        value: 'mysql',
        label: 'mysql',
      },],
      templates:[
      {
        value: '考评1',
        label: '考评1',
      },
      ],
      tNames:[
      {
        value: '张三',
        label: '张三',
      },
      ]
      
    }
    )
        
    //分页字体
    const small = ref(true)
    // const size = ref<'default' | 'large' | 'small'>('default')
    
    //分页数据
    const query = reactive({
        pageIndex: 1,
        pageSize: 5,
    });
    //
    
    //表格数据
    const tableData = ref();
    //总页数
    const pageTotal = ref(0);
    const multipleTableRef = ref()
    const state = reactive({
        multipleSelection:[]
    })
    
    // 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
    const getData = () => {
        getTeacherPoll({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
            console.log(res,"---res---")
            // tableData.value = res.data.
            let start  = (query.pageIndex-1)*query.pageSize;//开始位置
            let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
            tableData.value = res.data.slice(start,end);
            // tableData.value = res.data;
            pageTotal.value = res.data.length
        })
        
        
    };
    getData();
    //多选框权限
    const handleSelectionChange = (val) => {
      state.multipleSelection = val
    }
    // 分页导航
    const handleSizeChange = (val) => {
      // console.log(`${val} items per page`)
      query.pageSize = val;
      getData()
    }
    const handlePageChange = (val) => {
        query.pageIndex = val;
        console.log(val,"==")
        console.log(query.pageSize)
        getData()
    };
    
    
    //是够启用调用后台接口
    const  changeSwitch=(status)=>{
        //调用后台修改接口
        console.log(status,'>>>status');
    }
    
    // 删除单个操作
    const handleDelete = (index) => {
        // 二次确认删除
        ElMessageBox.confirm('确定要删除吗？', '提示', {
            type: 'warning'
        })
        .then(() => {
            ElMessage.success('删除成功');
            //to 传递id 到后台 
            tableData.value.splice(index, 1);
            // 删除成功后
            // getData()
        })
        .catch(() => {});
    };
    //删除多个数据  to......
    const handleAllDelete =()=>{
        // console.log('删除多个')
        console.log(state.multipleSelection,'===拿到所有选择的数据====')
        if (state.multipleSelection.length==0) {
            ElMessage.error('请选择项')
            return
          }
        // console.log(state.multipleSelection.map(item=>item.id))
        //axios删除的操作
        // deleteAllAdmin({ids:state.multipleSelection.map(item=>item.id)})
    
        
    }
    
    
    // 查询操作  to... 需要自己实现与后台交互
    const handleSearch = () => {
        query.pageIndex = 1;
        getData();
    };
    
    // 表格编辑时弹窗和保存
    const editVisible = ref(false);
    let form = reactive({
        id:'',
        tName:'', 
        clazz:'' ,
        org:'' ,
        branch:'',
        major:'',
        ipPriv:'1',
        pollTemplate:''
        
    });
    
    // 
    let titleEdit = ref('修改')
    let isAdd = ref(true)
    const open  = (index,row)=>{//index是时间源对象
        if(row){
            titleEdit.value = "修改"
            handleEdit(index,row)
            isAdd.value=false
        }else{
            //把第一个输出改为可编辑
            isAdd.value=true
            //清空表单中的数据form.
            titleEdit.value = "添加";
            form.clazz=''
            form.tName='' 
            form.org='' 
            form.branch=''
            form.major='' 
            editVisible.value = true	
        }
        console.log('-------测试传值-------')
        // console.log(index,row,index.target.innerText)
        // console.log(index,row)
        // console.log('================')
    
    }
    let idx = -1;
    const handleEdit = (index,row) => {
        idx = index;
        form.id = row.id;
        form.clazz=row.clazz
        form.tName=row.tName
        editVisible.value = true;
    };
    //保存添加或者修改的数据 ---需要重新实现
    const saveEdit = () => {
        editVisible.value = false;
        ElMessage.success(`修改第 ${idx + 1} 行成功`);
        tableData.value[idx].clazz = form.clazz;
        tableData.value[idx].tName= form.tName;
        
    };
    
    
    //导出数据
    const exportData=()=>{
        ElMessageBox.confirm(
            '确定要导出吗?',
            '提示',
            {
            confirmButtonText: '确定',
            cancelButtonText: '关闭',
            }
        )
    }
    
    //审核弹框和查看详情弹框
    const  dialogVisible01 = ref(false)
    const  dialogVisible02 = ref(false)
    //审核按钮
    const   openDetail=(row)=>{
        dialogVisible01.value=true
    }
    const isCommit=()=>{
        //.....
    }
    //查看详情
    const teacherPoll= reactive({
        tName:'',
        clazz:'',
        stuNum:18,
        scores:7,
    })
    const   lookDetail=(row)=>{
        teacherPoll.tName=row.tName
        teacherPoll.clazz=row.clazz
        dialogVisible02.value=true
    }



    </script >
    <style lang="less" scoped>
 
    .handle-box {
        margin-bottom: 20px;   
        .handle-btn{
            margin-left: 8px;
        }    
    }
    
    .handle-input {
        width:165px;
        margin-right: 8px;
    }
    .label{
       display: inline-block;
       max-width:100%;
       margin: 5px;
       font-weight: 700; 
    }
   
.red {
	color: #ED5565;
}
.qi{
    color: #23c6c8;
}
    .top-btn{
        float: right;
        .el-button{
            margin-left: 5px;
        }
    }
    .right-btn{
         justify-content:center;
        .el-button{
            height: 21px;
            // width: 60px;
            padding: 1px 5px;
            font-size:13px;
        }
    }
    
    .el-radio{
        color:#ed5565;
    }
    </style>